<template>
  <div class="face">
    <div class="top">top</div>
    <div class="body">body</div>
    <div class="foot">foot</div>
  </div>
</template>

<script>
export default {
  name: 'Face',
  data () {
    return {
      
    }
  }
}
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .top,.body,.foot {
    border: 1px solid blue;
    margin-bottom: 10px;
  }
.face{
  margin:0;
  padding:0;
  height:100vh;
  overflow:hidden;
}
  .top {
    height: 10%;
    overflow:hidden;
  }
  .body {
    height: 76%;
    overflow:hidden;
  }
  .foot {
    height: 10%;
    overflow:hidden;
  }
</style>

